<template>
  <div style="padding-top:1.5rem;">
    <div>
      <TopNav title="PayWayPage.grxx" show_left="true"></TopNav>
      <div class="content-box">
        <div class="Cash_num" style=""><h3>{{ $t('PayWayPage.qxzzftd') }}</h3>
          <ul class="open_Lottery_ul">
            <li v-if="loading">
              <div style="text-align: center;">
                <van-loading/>
              </div>
            </li>
            <li  :key='index' v-for='(item,index) in sceneList' @click="handleClickSelectRecharge(item.scene)"><img src="/static/icons/alipay.png" alt="">
              <div class="open_Lottery_ul_con"><h3>
                {{item.title}}
                <span style="display: none;"></span></h3><h4>{{item.desc}}</h4></div>
            </li>
            <li @click="handleClickKf"><img src="../../static/img/kf2.png" alt="">
              <div class="open_Lottery_ul_con"><h3>
                {{ $t('PayWayPage.rgcz') }}
                <span style="display: none;">{{ $t('PayWayPage.tj') }}</span></h3> <h4>{{ $t('PayWayPage.kjfb') }}</h4></div>
            </li>
            <li @click="handleClickShowBank"><img src="/static/icons/bank.png" alt="">
              <div class="open_Lottery_ul_con"><h3>
                {{ $t('PayWayPage.yxkcz') }} ({{ $t('PayWayPage.tj') }})
                <span style="display: none;">{{ $t('PayWayPage.tj') }}</span></h3> <h4>({{ $t('PayWayPage.zcwxzfb') }})</h4></div>
            </li>
            <!--li @click="handleClickKm"><img src="../../static/img/recharge_pwd.png" alt="">
              <div class="open_Lottery_ul_con"><h3>
                {{ $t('PayWayPage.kmcz') }}
                <span style="display: none;">{{ $t('PayWayPage.tj') }}</span></h3> <h4>{{ $t('PayWayPage.tgczkmmcz') }}</h4></div>
            </li-->
          </ul>
        </div>
      </div>
    </div>
    <nut-popup :overlay="false" position="bottom" closeable close-icon="cross" v-model="showPayPage" :style="{ height: '100%' }">
      <div style="text-align: left;height:100%;">
        <iframe  :src="payUrl" width="100%" height="100%" frameborder="0"></iframe>
      </div>
    </nut-popup>
    <nut-popup :overlay="false" position="bottom" closeable close-icon="cross" v-model="showBankPage" :style="{ height: '100%' }">
      <div style="padding:1rem;text-align: left;font-size:0.45rem;">
        <div v-if="rechargeBank">
          <ul class="recharge-bank">
            <li>{{ $t('PayWayPage.yxmc') }}: {{rechargeBank.bank}}</li>
            <li>{{ $t('PayWayPage.zh') }}: {{rechargeBank.name}}</li>
            <li>{{ $t('PayWayPage.kh') }}: {{rechargeBank.number}}</li>
            <li>{{ $t('PayWayPage.czje') }}: <span style="color:red;font-weight: bold;">{{parseInt(rechargeBank.money)+parseFloat(Math.random().toFixed(2))}}</span></li>
          </ul>
          <div style="color:blue;">
            <div>{{ $t('PayWayPage.qjqzzdysxx') }},{{ $t('PayWayPage.rhjfkjgpzhjtscfkddz') }}</div>
            <div style="color:red;">{{ $t('PayWayPage.sctpjlxy') }}1MB,{{ $t('PayWayPage.tpgdhdzshsb') }}!</div>
          </div>
          <div style="margin:0.5rem 0;">
            <nut-imagepicker
              @imgMsg="uploadIdCard"
              :width="60"
              :height="60"
              :max="1"
            >
            </nut-imagepicker>
          </div>
          <div>
            <nut-button
              block
              :disabled="loading"
              @click="handleClickSave"
            >{{ $t('PayWayPage.bcbtj') }}</nut-button>
          </div>
        </div>
        <div v-else>
          <EmptyBox text="$t('PayWayPage.zwyxqd')"/>
        </div>
      </div>
    </nut-popup>
    <nut-popup :overlay="false" position="top" closeable close-icon="cross" v-model="showKmPage" :style="{ height: '12rem;' }">
      <div style="padding:1rem;text-align: left;font-size:0.45rem;">
        <nut-textinput
          style="margin-top:0.3rem;"
          type="password"
          v-model="recharge_pwd"
          placeholder="$t('PayWayPage.qsrczkmm'):"
          :clearBtn="true"
          :disabled="false"
        />
        <button :disabled="loading"  @click="handleClickPasswordSet" class="btn">{{ $t('PayWayPage.tj') }}</button>
      </div>
    </nut-popup>
    <MainNav nav_index="4" ref="main_nav"/>
  </div>
</template>

<script>
import MainNav from "../components/MainNav";
import TopNav from "../components/TopNav";
import EmptyBox from "../components/EmptyBox";
import helper from "../utils/helper";

export default {
  name: 'ProfileDefailPage',
    components: {MainNav,TopNav,EmptyBox},
    data () {
    return {
        loading:false,
        user:{},
        showBankPage: false,
        showKmPage: false,
        rechargeBank:'',
        showPayPage: false,
        payUrl: '',
        select_id: '',
        sceneList:[],
        
        recharge_pwd: ''

    }
  },
    methods:{
        uploadIdCard(args){
            this.file = args.msg[0];
            // helper.compressImg(this.file,(data)=>{
            //     let file = helper.dataURLtoFile(data);
            //     this.file = file;
            //     console.log(file);
            // })
        },
        getData(){
            this.loading = true
            this.$axios.get(this.$api_url.user).then((res)=>{
                let data = res.data;
                this.user = data;
            }).catch((err)=>{
                this.$toast.fail(err.message)
            }).then(()=>{
                this.loading = false;
            })
        },
        getRechargeBank(){
            this.$axios.get(this.$api_url.get_recharge_bank_info).then((res)=>{
                this.rechargeBank = res.data;
                this.rechargeBank.money = 0;
            })
        },
        handleClickKm() {
          this.showKmPage = !this.showKmPage;
        },
        handleClickShowBank(){
            this.rechargeBank.money = this.money;
            this.showBankPage = true;
        },
        handleClickKf(){
          location.href="/#/recharge_by_kf"
        },
        handleClickSelectRecharge(type){
            let loading = this.$toast.loading(this.$t("PayWayPage.qsh")+"...");
            let param = new FormData();
            param.append("id",this.select_id);
            param.append("pay_type",type);
            param.append("file",this.file);
            this.$axios.post(this.$api_url.recharge,param,{
                headers: { "Content-Type": "multipart/form-data" }
            }).then((res)=>{
                if(res.data.code === 0){
                    if(!res.data.data){
                        this.$toast.success(res.data.msg);
                        return;
                    }
                    if(res.data.data.length>200 && (res.data.data.indexOf('<div')>=0 || res.data.data.indexOf('<form')>=0)){
                        document.getElementsByTagName('html')[0].innerHTML='<head><style>html{font-size: 12px;height:100%;}</style></head><body style="height:100%;">'+res.data.data+'</body>';
                        if(res.data.data.indexOf('form')>=0){
                            document.pay.submit();
                        }
                        return;
                    }

                    this.payUrl = res.data.data;
                    // this.showPayPage = true;
                    // return;
                    location.href=this.payUrl;
                    return;
                    // location.href=this.payUrl
                    let reg = /(http):\/\/([\w.]+\/?)\S*/ig;
                    if(this.payUrl.match(reg)){
                        location.href=this.payUrl;
                        return;
                    }
                    this.showPayPage = true;
                } else{
                    this.$toast.fail(res.data.msg);
                }
            }).catch((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
                loading.hide();
            })
        },
        handleClickSave(){
            if(this.file){
                this.handleClickSelectRecharge('bank');
                this.showBankPage = false;
            } else{
                this.$toast.warn(this.$t('PayWayPage.qtjjt'));
            }
        },
        getScene(){
            this.$axios.get(this.$api_url.get_recharge_scene).then((res)=>{
                this.sceneList = res.data
            })
        },
        handleClickPasswordSet() {
            this.showKmPage = false
            let loading = this.$toast.loading(this.$t("PayWayPage.qsh")+'...')
            this.loading = true
            this.$axios.post(this.$api_url.recharge,
                this.$qs.stringify({
                    pay_type: 'password',
                    id: this.select_id,
                    password: this.recharge_pwd
                })
            ).then((res)=>{
                if(res.data.code == 0){
                    this.$toast.success(res.data.msg);
                } else{
                    this.$toast.fail(res.data.msg);
                }
            }).catch((err)=>{
                this.$toast.fail(err.message)
            }).then(()=>{
                loading.hide();
                this.loading = false;
            })
        }
    },
    created() {
      this.getScene()
    },
    mounted() {
      this.select_id = this.$route.query.id;
      this.money = this.$route.query.money;
      this.getData();
      this.getRechargeBank();
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .content-box{
    text-align: left;
    padding: .32rem .44rem;
    background: #f2f2f2;
    position: fixed;
    padding-top: 1.7rem;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
  }
  .Cash_num{
    box-shadow: 0 0.04rem 0.133333rem 0 rgba(0,0,0,.15);
    margin-top: .24rem;
    background-color: #fff;
    border-radius: .08rem;
    padding: .24rem .506667rem .506667rem;
  }
  .Cash_num h3{
    font-size: .36rem;
    line-height: .8rem;
    color: #333;
  }
  .open_Lottery_ul li{
    overflow: hidden;
    padding: .24rem .16rem;
    background: url(/static/icons/point-right.png) no-repeat 100%;
    background-size: auto .32rem;
    background-origin: content-box;
    background-color: #fff;
    border-bottom: .013333rem solid #f2f2f2;
  }
  .open_Lottery_ul li:last-child{
    border-bottom: none;
  }
  .open_Lottery_ul li img{
    float: left;
    width: 1.04rem;
    height: 1.04rem;
    margin-right: .4rem;
    margin-top: .133333rem;
  }
  .open_Lottery_ul_con{
    float: left;
  }
  .open_Lottery_ul_con h3{
    font-size: .4rem;
    line-height: .6rem;
    color: #333;
  }
  .open_Lottery_ul_con h3 span{
    float: right;
    color: #777;
    font-size: .32rem;
    line-height: .533333rem;
  }
  .open_Lottery_ul_con h4{
    font-size: .32rem;
    color: #777;
    line-height: .72rem;
    margin-top: .133333rem;
  }
  .btn{
    font-size: .426667rem;
    line-height: 1.12rem;
    border-radius: .106667rem;
    background-color: #2f3848;
    color: #fff;
    width: 95%;
    text-align: center;
    display: block;
    margin: 0 auto;
    margin-top: .666667rem;
  }
  .btn:disabled{
    background: #ccc;
  }
</style>
